<template>
	<view>
		<uni-nav-bar statusBar @clickLeft='clickLeft()' @clickRight="clickRight(0)" :border='border' color="#000000"
			fixed backgroundColor='#FFFFFF00' left-icon="left" title=" ">

		</uni-nav-bar>
		<view class="topView">
			<view class="topView1"></view>
			<view class="headView flex-row-flex-start">
				<image class="headImage" :src="userinfo.avatar" mode=""></image>
				<view class="">
					<view class="nickname">
						{{userinfo.nickname}}
					</view>
					<view class="mobile">
						{{userinfo.mobile}}
					</view>
				</view>
			</view>

			<view v-for="(item,index) in list" :key="index">
				<view @click="itemClick(item)" class="item">
					<view class="flex-row-space-between">
						<view class="flex-row-flex-start">
							<image class="icon" :src="item.icon" mode=""></image>
							<view class="itemName">
								{{item.name}}
							</view>
						</view>
						<view class="flex-row-flex-end">
							<view class="itemValue">
								{{item.value}}
							</view>
							<image class="arrow" src="/static/common/arrow.png" mode=""></image>
						</view>

					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
		getServiceInfoByCity,
	} from '@/api/index.js'
	import {
		getConfig,
	} from '@/api/personalCenter.js'
	import {
		userDetail
	} from '@/api/personalCenter.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				config:{},
				border: false,
				list: [{
						icon: '/static/personalCenter/1.png',
						name: '订单',
						value: '',
						url: 'order?currentIndex=1'
					},
					{
						icon: '/static/personalCenter/2.png',
						name: '联系客服',
						value: '400-123-123',
						url: ''
					},
					{
						icon: '/static/personalCenter/3.png',
						name: '帮助',
						value: '',
						url: 'info?type=1'
					},
					{
						icon: '/static/personalCenter/4.png',
						name: '设置',
						value: '',
						url: 'setting'
					}


				],
				userinfo: {}

			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo')
			this.userDetail()
			
		},
		onLoad() {
			this.getServiceInfoByCity()
			this.config = uni.getStorageSync('config')
			this.list[1].value=this.config.client_service_mobile
			this.getConfig()
			
		},

		methods: {
			getServiceInfoByCity(){
				getServiceInfoByCity({
					city:uni.getStorageSync('ylCity')
				}).then(res => {
				
					this.list[1].value=res.data.service_mobile
					})
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			getConfig(){
				
				getConfig().then(res => {
					this.config=res.data
					uni.setStorageSync('config', this.config)
					this.list[1].value=this.config.client_service_mobile
					})
			},
			userDetail(){
				userDetail()
					.then(res => {
						uni.setStorageSync('userinfo', res.data)
					this.userinfo = uni.getStorageSync('userinfo')
					})
			},
		
			headClick() {
				uni.navigateTo({
					url: 'info?type=0'
				})
			},
			itemClick(item) {
				if(item.name=='联系客服'){
					uni.makePhoneCall({
						phoneNumber:this.list[1].value
					})
				}else{
					uni.navigateTo({
						url: item.url
					})
				}
				
			},
			clickLeft() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.headView {
		padding-top: 40rpx;
		padding-bottom: 60rpx;
	}

	.headImage {
		margin-left: 40rpx;
		margin-right: 20rpx;
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
	}

	.nickname {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3D3D3D;
	}

	.mobile {
		margin-top: 16rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.item {
		margin: 0 30rpx;
		height: 100rpx;
	}

	.icon {
		width: 36rpx;
		height: 36rpx;
	}

	.itemName {
		margin-left: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}

	.itemValue {
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
</style>
